<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>JsChartViewer.showClickableTextBox</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1"><a href="JsChartViewer.htm">JsChartViewer</a>.<wbr>showClickableTextBox</p>
<hr class="separator">
<p class="heading2a">Usage</p>
<div class="content">
showClickableTextBox(id, x, y, align, text [, boxStyle ])
</div>
<p class="heading2">Description</p>
<div class="content">
Draws a clickable textbox on the chart.<br><br>
The text box drawn using <a href="JsChartViewer.showTextBox.htm">JsChartViewer.showTextBox</a> is not designed not to respond to mouse or touch events. This is to avoid the text box from interfering with the chart usage of the mouse. For example, programming track cursors rely on mouse move events on the chart. The programming track cursor may draw text boxes on the chart. If the mouse happens to move over these text boxes, and the text boxes handle the mouse events, the chart may not receive the mouse events. This will interfere with the programmable track cursor.<br><br>
However, in some usage, it may be desirable to have text boxes that can respond to mouse or touch events. For example, a legend text box may contain links so that the user can click on those links to get more details. This showClickableTextBox method can be used to create such a text box.<br><br>
The textbox will be drawn as an HTML element overlaid on top of the chart. The <b>id</b> argument is an identifier to reference the element in other methods, such as in <a href="JsChartViewer.hideObj.htm">JsChartViewer.hideObj</a> to hide the element. The identifier should begin with an english alphabet, and consists only of characters A-Z, a-z, 0-9, '-' and '_'.
</div>
<p class="heading2">Arguments</p>
<div class="content">
<div style="width:100%;box-sizing:border-box;">
<table border="1" cellpadding="5" cellspacing="0" width="100%"> 
<tr>
<th width="19%">Argument</th><th width="19%">Default</th><th>Description</th>
</tr>
<tr>
<td>id</td><td>(Mandatory)</td><td>The identifier of the textbox.</td></tr><tr><td>x</td><td>(Mandatory)</td><td>The x pixel coordinate of the reference point of the textbox, relative to the chart.</td></tr><tr><td>y</td><td>(Mandatory)</td><td>The y pixel coordinate of the reference point of the textbox, relative to the chart.</td></tr><tr><td>align</td><td>(Mandatory)</td><td>The alignment of the textbox relative to the reference point. It must be one of <a href="JsChartViewer.TopLeft.htm">JsChartViewer.TopLeft</a>, <a href="JsChartViewer.TopCenter.htm">JsChartViewer.TopCenter</a>, <a href="JsChartViewer.TopRight.htm">JsChartViewer.TopRight</a>, <a href="JsChartViewer.Left.htm">JsChartViewer.Left</a>, <a href="JsChartViewer.Center.htm">JsChartViewer.Center</a>, <a href="JsChartViewer.Right.htm">JsChartViewer.Right</a>, <a href="JsChartViewer.BottomLeft.htm">JsChartViewer.BottomLeft</a>, <a href="JsChartViewer.BottomCenter.htm">JsChartViewer.BottomCenter</a> or <a href="JsChartViewer.BottomRight.htm">JsChartViewer.BottomRight</a>. It specifies the point of the textbox that should be the reference point. For example, if TopLeft is used, it means the textbox should be positioned such that the top-left of the text box is at the reference point.</td></tr><tr><td>text</td><td>(Mandatory)</td><td>The text to be displayed.</td></tr><tr><td>boxStyle</td><td>""</td><td>The box style in the same format used in the HTML "style" attribute. An example is "border:solid 1px black;background:#ffffcc;padding:3px;font:bold 11px Arial;".</td>
</tr>
</table>
</div>
</div>
<p class="heading2">Return Value</p>
<div class="content">
A DOM element representing the textbox.
</div>
<br><hr class="separator">
<div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
